<template>
    <div class="left">
        <h3>这里是left菜单区域</h3>
        <hr>
        <!--这里如果不加:则传过去的是string-->
        <Count :init="6"></Count>
    </div>
</template>

<script>
    export default {
        name: "Left"
    }
</script>

<!--加上scoped,在渲染到HTML上的时候，会自动在本组件中加上自定义的属性，
 在添加样式的时候会默认加上这个自定义的属性，使样式只影响当前组件
 相当于html中: <h3 data-v1-xxx>xxx</h3>
 相当于less中：h3[data-v1-xxx]{color:red}
 -->
<style scoped>
 .left{
     margin-top: 5px;
     float:left;
     background-color: #2e6da4;
     width: 250px;
     height: 250px;
 }

 h3 {
     color: red;
 }

 /*
    影响的是子组件（一般是使用第三方组件库的时候，修改第三方组件的默认样式，需要用到deep）
    不加deep相当于: h5[data-v1-xxx]
    加上deep相当于: [data-v1-xxx] h5
*/
/deep/ h5{
    color: pink;
}
</style>
